<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`总代账号:`"
					prop="userName"
					label-width="110px"
				>
					<el-input
						v-model.trim="queryData.userName"
						:placeholder="`请输入总代账号`"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`合营码:`"
					prop="joinCode"
					label-width="110px"
				>
					<el-input
						v-model.trim="queryData.joinCode"
						:placeholder="`请输入合营码`"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`彩票场馆:`"
					prop="joinCode"
					label-width="110px"
				>
					<el-select
						v-model="queryData.stadiumType"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
								v-for="(key, val) in stadiumTypes"
								:key="key"
								:label="key"
								:value="val"
							></el-option>
				</el-select>
				</el-form-item>
              

				<el-form-item class="flex-row-container">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				v-bind="$attrs"
				v-on="$listeners"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					v-for="(item, index) in columns"
					:key="'column_' + index"
					:prop="columns[index].prop"
					:align="item.alignCenter"
					:label="item.label"
					:min-width="item.minWidth"
					:fixed="item.isFixed"
					:sortable="item.isSortColumn"
					:show-overflow-tooltip="item.isShowTip"
				>
					<template slot="header">
						<span v-if="item.itemTipContent">
							{{ item.label }}
							<el-tooltip
								class="item"
								effect="dark"
								:content="item.itemTipContent"
								placement="top-start"
							>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
						<span v-else>
							{{ item.label }}
						</span>
					</template>
					<template slot-scope="{ row, $index }">
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ row[item.prop] || '-' }}
							</span>
						</div>
                        <div v-if="item.solt === 'actionsSolt'">
							<el-button
                                type="primary"
								v-if="hasPermission('909330463')"
                                @click="handleCreate(row)"
                            >
                                {{ $t('common.edit') }}
                            </el-button>
                        </div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>


        <el-dialog
			width="550px"
			:title="form.id ? '编辑': '新增'"
            :visible.sync="formVisible"
		>
			<el-form
				ref="form"
				:model="form"
			>
                <el-form-item 
                    prop="userName" 
                    :label="`总代账号:`"
                    label-width="130px"
                   
                >
					{{ form.userName || '-' }}
				</el-form-item>

				<el-form-item 
                    prop="userName" 
                    :label="`合营码:`"
                    label-width="130px"
                
                >
					{{ form.joinCode || '-'}}
				</el-form-item>

                <el-form-item
					:label="`彩票场馆:`"
					prop="stadiumType"
					label-width="130px"
					:rules="[
						{
							required: true,
							message: '请选择彩票场馆',
							trigger: ['blur', 'change']
						}
					]"
				>
					<el-select
						v-model="form.stadiumType"
						:placeholder="$t('common.select_all')"
					>
						<el-option
								v-for="(key, val) in stadiumTypes"
								:key="key"
								:label="key"
								:value="String(val)"
							>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="备注信息："
					prop="remark"
                    label-width="130px"
				>
					<el-input
                        v-model.trim="form.lotteryStadiumRemark"
						clearable
						type="textarea"
						:maxlength="20"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 280px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="formVisible = false">
					{{ $t('agent.cancel') }}
				</el-button>
				<el-button
					:loading="loading"
					type="primary"
					@click="handleSubmit"
				>
					{{ $t('common.sure') }}
				</el-button>
			</div>
		</el-dialog>

		<GoogleKeyInput
			:isShowdialog="isShowdialog"
			@getGoogleKey="updateFetch "
			@backPrevStep="backPrevStep()"
		></GoogleKeyInput>
        
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'

const startTime = () =>
  dayjs()
    .startOf('day')
    .valueOf()
const endTime = () =>
  dayjs()
    .endOf('day')
    .valueOf()

export default {
  components: {
    MainContent,
	GoogleKeyInput: () => import('@/components/GoogleKeyInput')
  },
  mixins: [list],
  data() {
    return {
      dayjs,
	  pageSize: 10,
      tableHeight: 480,
      otherDependenComponents: [],
      columns: getColumns(),
	  isShowdialog: false,
      queryData: {
        joinCode: undefined,
        stadiumType: undefined,
        userName: undefined,
      },
      merchantInfo: {},
      formVisible: false,
      form: {
        joinCode: undefined,
        stadiumType: undefined,
        userName: undefined,
		lotteryStadiumRemark: undefined,
      },
      tableData: [],
      loading: false,

      numDialog: {
        visible: false,
        row: {}
      },
	  stadiumTypes: {
		0: 'PM彩票',
		1: 'HC彩票'
	  }
    }
  },
  methods: {
	backPrevStep() {
		this.isShowdialog = false
	},
    handleNum(row) {
        this.numDialog.visible = true
        this.numDialog.row = row
    },
    forceUpdate(value) {
      this.$forceUpdate()
      this.queryData.searchMemberName = this.queryData.searchMemberName.replace(
        /[^A-Za-z0-9]/g,
        ''
      )
    },

    loadData() {
      const params = {
        ...this.queryData,
        ...this.getParams()
      }
      this.loading = true
      this.$api
        .getSelectProxyStadiumConfigPage(params)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.tableData = res?.data?.record || []
            this.total = res?.data?.totalRecord || 0
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    reset() {
      this.pageNum = 1
	  this.queryData = {
        merchantId: undefined,
        createdBy: undefined,
        groupName: undefined,
      }
      this.loadData()
    },

    handleCreate(row) {
        const _row = row || {}
        this.formVisible = true
		if (this.$refs['form'] && this.$refs['form'].resetFields) {
			this.$refs['form'].resetFields()
		}
		
        this.form = {
			id: _row.id,
			joinCode: _row.joinCode,
			stadiumType: String(_row.stadiumType),
			userName: _row.userName,
			lotteryStadiumRemark: _row.lotteryStadiumRemark
		}
    },
    async handleDel(row) {
      try {
        const f = await this.$confirm(
				`<strong>是否删除该条配置？</strong></br>
                 <span style='font-size:12px;color:#c1c1c1'>请谨慎操作！</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)

            const res = await this.$api.proxyGroupDeleteById({
                id: row.id
            })
            this.loadData()

      } catch (err) {
         console.log(err)
      }
    },

	async updateFetch(googleVerifyCode) {
		try {
			const res = await this.$api.updateProxyStadiumConfig({
				googleVerifyCode,
                ...this.form,
           })
		   this.isShowdialog = false
		   this.loadData()
		   this.$message.success('保存成功')
		} catch(err) {
            console.log(err)
        }
	},
    async handleSubmit() {
        try {
           await this.$refs['form'].validate()
		   this.isShowdialog = true
           this.formVisible = false
        } catch(err) {
            console.log(err)
        }
    }
   
  }
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.input-with-select {
	width: 110px;
}
.ptop {
	padding-top: 2px;
	margin-left: 10px;
}
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
</style>
